<!DOCTYPE html>

<html>
  <head>
    <title>title</title>
    <link></link>
    <style>
    </style>
  </head>
  <body>

    <div style="margin: 300px">
      <div id="div1">
          <!--<span>div1</span>-->
          <!--<span>div11</span>-->
          <!--<span>div111</span>-->
          <!--<input type="text" id="input1" placeholder="请输入用户名" onchange="foo()">-->
          <input type="text" id="input1" placeholder="请输入用户名" onblur="clean()"  >

           <input type="password" id="input2" placeholder="请输入密码">

          <!--<input type="checkbox" id="ck1" name="name" value="zhangsan">zhangsan-->
          <!--<input type="checkbox" name="name" value="lisi">lisi-->
          <!--<input type="checkbox" name="name" value="wangwu">wangwu-->
          <input type="button" value="登录" onclick="login()">
          <input type="button" value="点击" onclick="funName(this)">

        </div>
      <!--<div class="div2">-->
          <!--<span>div2</span>-->
          <!--<span>div22</span>-->
      <!--</div>-->
        <!--<div class="div2">-->
          <!--<span>div2</span>-->
          <!--<span>div22</span>-->
      <!--</div>-->
    </div>
    <script>
        function funName(ths) {
            console.log("已被点击");//这个this是window的对象
            console.log(this);
            console.log(this.value);
            ths.value="已点击"
        }
      function foo(){
          var input1=document.getElementById("input1");
        console.log(input1.value);
          alert(input1.value);
          confirm("输入的内容："+input1.value)
      }
      function clean() {
          var clenalert=document.getElementById("alert");
          if (clenalert){
               clenalert.remove()
          }


      }
      function login() {
          var input1=document.getElementById("input1");
          var input2=document.getElementById("input2");
          if(input1.value && input1.value.length>6 && input1.value.length<12){
              alert("输入符合要求")
          }else {
              var add = document.createElement("p");
              add.innerHTML = "<span id='alert'>输入内容应该是大于6且小于12个字符</span>";
              var div1 = document.getElementById("div1");
              div1.appendChild(add);
          }
          console.log("输入的用户名是：",input1.value,"输入的密码是：",input2.value);
          alert("输入的用户名是：" + input1.value + "密码:" + input2.value)

      }
      function demo1() {
          var name="zhangsan";
            console.log(name)
      }
      function demo2() {
          const names="zhangsan2";
            console.log(names)
      }
      function demo3() {
          let names="zhangsan3";
            console.log(names)
      }
      function demo4(ths) {
          console.log(ths.value)
          if(ths.value && ths.value.length>6 && ths.value.length<12){
              alert(ths.value)
          }else {
              alert("输入内容应该是大于6且小于12个字符")
          }
      }


    </script>
  </body>
</html>